<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<head>
  <title>分布式文件系统性能监控</title>
</head>

<div class="row">
  <div class="col-xs-12" id="parent">
    <c:forEach items="${groups}" var="groupb"  varStatus="groupstatus">
      <div class="widget-box " style="height:500px;min-height :200px; height:auto!important">
        <div class="widget-header">
          <h4 class="widget-title lighter smaller">${groupb.groupName}</h4>
        </div>
        <div class="widget-body">
          <div class="widget-main padding-8 admin-body">
            <ul id="myTab" class="nav nav-tabs">
              <li class="active">
                <a href="#home_${groupb.groupName}" data-toggle="tab">
                  基本信息
                </a>
              </li>
              <li>
                <a href="#home2_${groupb.groupName}" data-toggle="tab">
                  高级信息
                </a>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade in active" id="home_${groupb.groupName}">
                <c:forEach items="${groupb.storageList}" var="storage" varStatus="storagestatus">
                  <fieldset style="background-color: #ffffff;">
                    <legend style="background-color: #ffffff">${storage.ipAddr}</legend>
                    <p style="margin-top:10px;margin-left:10px;"><%--<b>cpu : </b>${storage.cpu}%  <b>mem : </b>${storage.mem}%--%>  <b>状态 : </b><font color="${storage.curStatus=='ACTIVE'?"green":"red"}">${storage.curStatus}</font> </p>
                    <p style="margin-top:10px;margin-left:10px;"><b>ifTrunkServer : </b>${storage.ifTrunkServer}  <b>最后更新日期 : </b>  <fmt:formatDate value="${storage.created}" pattern="yyyy-MM-dd HH:mm:ss" /></p>
                  </fieldset>
                </c:forEach>
              </div>

              <div class="tab-pane" id="home2_${groupb.groupName}">
                <c:forEach items="${groupb.storageList}" var="storage" varStatus="storagestatus">
                  <input type="hidden" value="${storage.ipAddr}" name="ipAddr" />
                  <input type="hidden" value="${storage.mem}" name="mem" ip="${storage.ipAddr}" />
                  <legend style="background-color: #ffffff">${storage.ipAddr}</legend>
                  <p style="margin-top:10px;margin-left:10px;"><b>version : </b>${storage.version}  <b>硬盘总容量 : </b><span id="_total_${groupstatus.index}_${storagestatus.index}">${storage.totalMB}M</span>  <b>硬盘剩余容量 : </b><span id="_freeMB_${groupstatus.index}_${storagestatus.index}">${storage.freeMB}M</span></p>
                  <p style="margin-top:10px;margin-left:10px;"><b>upload priority : </b>${storage.uploadPriority}  <b>joinTime : </b><fmt:formatDate value="${storage.joinTime}" pattern="yyyy-MM-dd HH:mm:ss" /> <b>upTime : </b><fmt:formatDate value="${storage.upTime}" pattern="yyyy-MM-dd HH:mm:ss" /> </p>

                  <p style="margin-top:10px;margin-left:10px;"><b>totalUploadCount : </b>${storage.totalUploadCount}  </p>
                </c:forEach>
              </div>
            </div>
          </div>
        </div>
      </div>
    </c:forEach>
  </div>
</div>
<script type="application/javascript">
  var scripts=[null,null];
  ace.load_ajax_scripts(scripts,function(){
      /*setTimeout(function(){
        //加载数据
        $.ajax({
          type:'POST',
          url:'${ctx}/${frameworkPath}/dfs/monitor/performance',
          async:false,
          timeout:0,
          success:function(data){
            if(data.success){
              debugger;
              var groups = data.groups;
              for(var i=0;i<groups.length;i++){
                var div = $('<div class="widget-box " style="height:500px;min-height :200px; height:auto!important"></div>');

                var headerDiv = $('<div class="widget-header"></div>');
                var h4=$('<h4 class="widget-title lighter smaller">组['+groups[i].groupName+']</h4>');
                h4.appendTo(headerDiv);
                headerDiv.appendTo(div);

                //开始添加body
                var body = $('<div class="widget-body"><div class="widget-main padding-8 admin-body"></div></div>');
                body.appendTo(div);
                //添加tab
                var tab = $('<ul id="myTab" class="nav nav-tabs">'+
                        '<li class="active">'+
                        '<a href="#home_'+groups[i].groupName+'" data-toggle="tab">'+
                        '基本信息'+
                        '</a>'+
                        '</li>'+
                        '<li>'+
                        '<a href="#home2_'+groups[i].groupName+'" data-toggle="tab">'+
                        '高级信息'+
                        '</a>'+
                        '</li>'+
                        '</ul>');
                tab.appendTo(body.find('.admin-body'));

                //为tab赋值，显示内容
                var tabContent= $('<div id="myTabContent_'+groups[i].groupName+'" class="tab-content">' +
                        '<div class="tab-pane fade in active" id="home_'+groups[i].groupName+'"></div>' +
                        '<div class="tab-pane fade in active" id="home2_'+groups[i].groupName+'"></div>' +
                        '</div>');
                //遍历storgae
                $.each(groups[i].storages, function (n, storage){
                  var fieldSet = $(
                          '<fieldset style="background-color: #ffffff;">'+
                          '<legend style="background-color: #ffffff">'+storage.ipAddr+'</legend>'+
                            //'<p style="margin-top:10px;margin-left:10px;"><b>cpu : </b>'+storage.cpu+'%  <b>mem : </b>'+storage.mem+'%  <b>状态 : </b><font color="${storage.curStatus=='ACTIVE'?"green":"red"}">${storage.curStatus}</font> </p>'+
                            //'<p style="margin-top:10px;margin-left:10px;"><b>ifTrunkServer : </b>${storage.ifTrunkServer}  <b>最后更新日期 : </b>  <fmt:formatDate value="${storage.created}" pattern="yyyy-MM-dd HH:mm:ss" /></p>'+
                          '</fieldset>');
                  fieldSet.appendTo(tabContent.find("#home_"+groups[i].groupName));
                });
                tabContent.appendTo(body.find('.admin-body'));

                div.appendTo($('#parent'));
              }
            }
          },
          error: function(XmlHttpRequest, textStatus, errorThrown){
            alert('error'+XmlHttpRequest.status);
          }
        });
      });*/
  });
</script>